<template>
    <div class="account-header">
        <div class="back-icon" @click="handleBackClick">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        手机注册
    </div>
    <div class="account-content">
        <div class="phone-reg-box">
            <input class="custom-input large" type="text" v-model="phone" placeholder="请输入手机号码">
            <div class="phone-code-box">
                <input class="custom-input code-size" type="text" v-model="code" placeholder="请输入手机验证码" autocomplete="one-time-code" maxlength="6">
                <div class="code-btn" :class="{ disabled: isForbid }" @click="handleGetPhoneCodeClick">{{ isForbid ? '已发送 ' + count : '获取验证码' }}</div>
            </div>
            <div class="password-input-box">
                <input ref="passwordInput" class="custom-input large with-eye" type="password" v-model="password" placeholder="请设置密码(6-12个字母和数字)">
                <div class="password-eye" @click="handlePasswordEyeClick">
                    <template v-if="passwordEyeOpen">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                            <path
                                d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                        </svg>
                    </template>
                    <template v-else>
                        <svg class="bi-eye-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 55.02">
                            <path
                                d="M82.672,16.696C75.019,27.1,62.962,33.247,50.005,33.247c-12.966,0-25.032-6.149-32.681-16.551h-5.213l0.431,0.652 c8.346,12.646,22.352,20.195,37.462,20.195c15.107,0,29.11-7.549,37.454-20.198l0.43-0.649H82.672z">
                            </path>
                            <path d="M48.378,37.26v11h4v-11H48.378z"></path>
                            <path d="M63.877,34.419l4.684,11.035l3.682-1.563l-4.684-11.035L63.877,34.419z"></path>
                            <path d="M76.975,27.423l7.325,9.375l3.152-2.463l-7.325-9.375L76.975,27.423z"></path>
                            <path d="M32.877,32.798l-4.202,11.546l3.759,1.368l4.202-11.546L32.877,32.798z"></path>
                            <path d="M20.477,25.273l-7.373,9.437l3.152,2.463l7.373-9.437L20.477,25.273z"></path>
                        </svg>
                    </template>
                </div>
            </div>
            <div class="password-confirm-input-box">
                <input ref="passwordConfirmInput" class="custom-input large with-eye" type="password" v-model="password_confirm" placeholder="请重新输入密码">
                <div class="password-confirm-eye" @click="handlePasswordConfirmEyeClick">
                    <template v-if="passwordConfirmEyeOpen">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                            <path
                                d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                        </svg>
                    </template>
                    <template v-else>
                        <svg class="bi-eye-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 55.02">
                            <path
                                d="M82.672,16.696C75.019,27.1,62.962,33.247,50.005,33.247c-12.966,0-25.032-6.149-32.681-16.551h-5.213l0.431,0.652 c8.346,12.646,22.352,20.195,37.462,20.195c15.107,0,29.11-7.549,37.454-20.198l0.43-0.649H82.672z">
                            </path>
                            <path d="M48.378,37.26v11h4v-11H48.378z"></path>
                            <path d="M63.877,34.419l4.684,11.035l3.682-1.563l-4.684-11.035L63.877,34.419z"></path>
                            <path d="M76.975,27.423l7.325,9.375l3.152-2.463l-7.325-9.375L76.975,27.423z"></path>
                            <path d="M32.877,32.798l-4.202,11.546l3.759,1.368l4.202-11.546L32.877,32.798z"></path>
                            <path d="M20.477,25.273l-7.373,9.437l3.152,2.463l7.373-9.437L20.477,25.273z"></path>
                        </svg>
                    </template>
                </div>
            </div>
            <div class="user-agree">
                <input type="checkbox" v-model="isAgree" class="checkbox">我已阅读并同意&nbsp;<label @click="handlePrivacyUrlClick">用户隐私协议政策</label>
            </div>
        </div>
        <div class="large-btn" @click="handlePhoneRegClick">注册</div>
        <div class="other-account-text" @click="handleOtherAccountLoginClick">已有账号，去登录&nbsp;></div>
    </div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';


export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            phone: '',
            code: '',
            password: '',
            password_confirm: '',
            isAgree: false,
            count: 0,
            passwordEyeOpen: false,
            passwordConfirmEyeOpen: false,
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
    },
    computed: {
        isForbid() {
            return this.count !== 0;
        }
    },
    methods: {
        handleBackClick() {
            this.myValue.currentComponent = 'Login';
            this.myValue.currentComponentTab = 'PHONE_CODE_LOGIN';
        },
        handlePrivacyUrlClick() {
            this.myValue.currentComponent = 'Privacy';
            this.myValue.currentComponentTab = '';
            this.myValue.lastComponent = 'PhoneReg';
            this.myValue.lastComponentTab = '';
        },
        handlePasswordEyeClick() {
            this.passwordEyeOpen = !this.passwordEyeOpen;
            if (this.passwordEyeOpen) {
                this.$refs.passwordInput.type = 'text';
            } else {
                this.$refs.passwordInput.type = 'password';
            }
        },
        handlePasswordConfirmEyeClick() {
            this.passwordConfirmEyeOpen = !this.passwordConfirmEyeOpen;
            if (this.passwordConfirmEyeOpen) {
                this.$refs.passwordConfirmInput.type = 'text';
            } else {
                this.$refs.passwordConfirmInput.type = 'password';
            }
        },
        handleGetPhoneCodeClick() {
            if (this.isForbid) {
                return false;
            }

            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            axios.get('/api/phone_code/get', {
                params: {
                    type: 1,
                    phone: this.phone,
                    game_id: this.myValue.gameId
                }
            }).then(res => {
                let data = res.data;
                if (res.data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                layer.msg('短信已发送成功，请注意查看手机', { time: 1000 });
                this.countDown(60);
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handlePhoneRegClick() {
            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (this.code === '') {
                layer.msg('请输入验证码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            if (this.password === '') {
                layer.msg('请输入密码', { time: 1000 });
                return false;
            }

            if (this.password !== this.password_confirm) {
                layer.msg('密码不一致，请重新输入', { time: 1000 });
                return false;
            }

            if (this.password.length < 6 || this.password.length > 12) {
                layer.msg('密码不符合规则', { time: 1000 });
                return false;
            }

            if (this.isAgree === false) {
                layer.msg('请勾选用户隐私协议方可继续', { time: 1000 });
                return false;
            }

            axios.post('/api/juheh5/account/phone_reg', {
                phone: this.phone,
                code: this.code,
                password: this.password,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                layer.msg('注册成功', { time: 1000 });

                let info = data.data;
                let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                juheh5Service.loginCb(info)
                return
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handleOtherAccountLoginClick() {
            this.myValue.currentComponent = 'Login';
            this.myValue.currentComponentTab = 'PASSWORD_LOGIN';
        },
        phoneVerify(phone) {
            const pattern = /^1[3456789]\d{9}$/;
            return pattern.test(phone);
        },
        countDown(seconds) {
            this.count = seconds;
            const updateCountdown = () => {
                this.count--;
                if (this.count > 0) {
                    setTimeout(updateCountdown, 1000);
                }
            }

            updateCountdown();
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.layui-input-block {
    margin-top: 3px;
    margin-left: 0px !important;
}

.disabled {
    border-color: #eee !important;
    background-color: #fbfbfb !important;
    color: #d2d2d2 !important;
    cursor: not-allowed !important;
    opacity: 1;
}
</style>
